<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        body {
            background: none;
        }

        .popBox .close {
            position: absolute;
            right: 0;
            top: 0;
            width: 2.15rem;
            height: 2rem;
            background: url(../../image/common/close.png) no-repeat center center;
            background-size: 1rem;
        }

        .popBox {
            width: 100%;
            max-height: 90%;
            background-color: #FFF;
            bottom: 0;
            left: 0;
            padding: 0 1rem 1rem;
        }

        .popBox .popHead {
            padding-bottom: 1.2rem;
        }

        .small {
            width: 4.25rem;
            height: 4.25rem;
            margin-top: -1rem;
            background-color: #FFF;
        }
        .sizeTit {
            padding: 0.4rem 0;
        }

        .choice {
            padding-bottom: 0.25rem;
            border-bottom: 1px solid #eee;
        }

        .choice li {
            color: #353336;
            border-radius: 0.1rem;
            height: 1.4rem;
            line-height: 1.4rem;
            text-align: center;
            padding: 0 0.5rem;
            margin: 0 0.4rem 0.5rem 0.1rem;
            font-size: 0.7rem;
            background-color: #F1F1F1;
            min-width: 3rem;
        }

        .choice li.outline {
            background-color: #FFF1E5;
            color: #FF8028;
        }
        .choice li.outline:before {
            border-color: #FFC9AE;
            border-radius: 0.2rem;
        }

        .choice li.no {
            color: rgba(68, 68, 68, 0.5);
        }
        .shu {
            min-height: 3rem;
        }

        .comBtmBtn {
            height: 2.25rem;
        }

        .price {
            font-weight: normal;
            font-size: 1rem;
            line-height: 1;
            margin-bottom: 0.2rem;
        }
        /* 购物车数量 */
        .numBox .num {
            text-align: center;
            font-size: 0.6rem;
            color: #333;
            height: 1.5rem;
            line-height: 1.5rem;
            background-color: #f1f1f1;
            margin: 0 1px;
            min-width: 2.5rem;
            padding: 0 0.25rem;
        }
        .numBox .up,
        .numBox .down {
            width: 1.5rem;
            height: 1.5rem;
            font-size: 0.6rem;
            line-height: 1.5rem;
            text-align: center;
            color: #333;
            background-color: #F1F1F1;
        }

        .scrollBox {
            max-height: 40vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>

<body>
    <div class="popOverlay" tapmode onClick="api.closeFrame();"></div>
    <div class="popBox" id="data_html">

    </div>

<script type="text/x-dot-template" id="data_tpl">
    <div class="popHead aui-flex-col aui-border-b">
        <div class="small aui-border">
            <img src="{{= it.goods_cover || ''}}" width="100%" alt="">
        </div>
        <div class="flex-auto aui-padded-l-15 aui-flex-row aui-flex-middle">
            <div class="price font-helvet">￥<span id="specPrice"></span></div>
            <div class="aui-font-size-13 color-666 aui-ellipsis">已选：<span id="spec"></span></div>
        </div>
        <div class="close" tapmode onclick="api.closeFrame();"></div>
    </div>
    <div class="scrollBox">
    <div class="attrList">
        {{ for(var i in it.attrDatas ) { }}
        <div class="sizeTit aui-font-size-14 color-ad">{{= it.attrDatas[i].attr_name }}</div>
        <ul class="choice aui-flex-col aui-flex-middle" data-spec="{{= it.attrDatas[i].attr_id }}">
            {{ for(var n in it.attrDatas[i].itemDatas ) { }}
            <li class="{{= n==0?'outline':''}}" data-specType="{{= it.attrDatas[i].attr_name }}" data-val="{{= it.attrDatas[i].itemDatas[n].item_id }}" tapmode onclick="checkSpec(this);">{{= it.attrDatas[i].itemDatas[n].item_name }}</li>
            {{ } }}
        </ul>
        {{ } }}
    </div>
    <div class="specList">
        {{ for(var i in it.specDatas ) { }}
        <div class="sizeTit aui-font-size-14 color-ad">{{= it.specDatas[i].spec_name }}</div>
        <ul class="choice aui-flex-col aui-flex-middle" data-spec="{{= it.specDatas[i].spec_id }}">
            {{ for(var n in it.specDatas[i].itemDatas ) { }}
            <li class="{{= n==0?'outline':''}}" data-specType="{{= it.specDatas[i].spec_name }}" data-val="{{= it.specDatas[i].itemDatas[n].item_id }}" tapmode onclick="checkSpec(this);">{{= it.specDatas[i].itemDatas[n].item_name }}</li>
            {{ } }}
        </ul>
        {{ } }}
    </div>
    </div>
    <div class="shu aui-flex-col aui-flex-between aui-flex-middle">
        <div class="aui-font-size-14 color-35">购买数量</div>
        <div class="aui-flex-col aui-flex-middle aui-flex-right numBox">
            <div class="down" tapmode onclick="minus(this);">-</div>
            <div class="num" id="buyNum">1</div>
            <div class="up" tapmode onclick="plus(this);">+</div>
        </div>
    </div>
    <div class="comBtmBtn radius" tapmode onclick="save()">确定</div>
</script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var _CART_DATA_U_ = [];
var GOD_INFO;
var PRICE_DATA;
var CURRENT_SPEC_DATA;
var cartItem;
    apiready = function() {
        GOD_INFO = api.pageParam.godInfo;
        PRICE_DATA = GOD_INFO.priceData;

        cartItem = {
            goods_id: GOD_INFO.goods_id,
            goods_name: GOD_INFO.goods_name,
            goods_cover: GOD_INFO.goods_cover,
            goods_type: GOD_INFO.goods_type,
            // goods_count: parseInt(goods_count),
            // goods_unit_price: CURRENT_SPEC_DATA.gp_sale_price,
            // goods_pay_price: 0,
            // goods_attr_names: goods_attr_names,
            // goods_spec_ids: CURRENT_SPEC_DATA.gp_goods_spec_items,
            // goods_spec_names: $$('#spec').text(),
            // price_id: CURRENT_SPEC_DATA.gp_id
        }

        var tpl = $$('#data_tpl').html();
        var tempFn = doT.template(tpl);
        $$('#data_html').html(tempFn(GOD_INFO));
        api.parseTapmode();
        setTimeout(function(){
            checkSpecPrice();
        },50);

    }
    //选择规格
    function checkSpec(el){
        var _this = $$(el);
        if (!_this.hasClass('outline')){
            _this.addClass("outline").siblings().removeClass("outline");
            checkSpecPrice();
        }
    }
    function checkSpecPrice(){
        var specIdArr = [];
        var specIdArrStr = '';
        var specNameArr = [];
        var specNameArrStr = '';
        var attrIdArr = [];
        var attrIdArrStr = '';
        var attrNameArr = [];
        var attrNameArrStr = '';
        $$('.attrList .choice .outline').each(function(){
            var attrId = $$(this).data('val');
            var attrVal = $$(this).data('specType') + ':' + $$(this).text();
            attrIdArr.push(attrId);
            attrNameArr.push(attrVal);
        });
        $$('.specList .choice .outline').each(function(){
            var specId = $$(this).data('val');
            var specVal = $$(this).data('specType') + ':' + $$(this).text();
            specIdArr.push(specId);
            specNameArr.push(specVal);
        });
        specIdArrStr = specIdArr.join(",");
        specNameArr = specNameArr.join(",");
        attrIdArrStr = attrIdArr.join(",");
        attrNameArrStr = attrNameArr.join(",");

        for(var i=0;i<PRICE_DATA.length;i++){
            if(PRICE_DATA[i].gp_goods_spec_items == specIdArrStr){
                CURRENT_SPEC_DATA = PRICE_DATA[i];
            }
        }
        cartItem.goods_spec_ids = specIdArrStr;
        cartItem.goods_spec_names = specNameArr;
        cartItem.goods_attr_ids = attrIdArrStr;
        cartItem.goods_attr_names = attrNameArrStr;
        cartItem.goods_unit_price = CURRENT_SPEC_DATA.gp_sale_price;
        cartItem.price_id = CURRENT_SPEC_DATA.gp_id;

        $$('#spec').text(attrNameArrStr + specNameArr);
        $$('#specPrice').text(CURRENT_SPEC_DATA.gp_sale_price);
    }
    //加减
    function minus(el){
        var numBox = $$(el).parents('.numBox');
        var num = parseInt(numBox.find('.num').text());
        num--;
        num = num<1 ? 1 : num;
        numBox.find('.num').text(num);
    }
    function plus(el){
        var numBox = $$(el).parents('.numBox');
        var num = parseInt(numBox.find('.num').text());
        num++;
        numBox.find('.num').text(num);
    }


    //加入购物车
    function save(){
        if(getPrefs('_CART_DATA_U_')){
            _CART_DATA_U_ = getPrefs('_CART_DATA_U_');
        }

        var discount = 0;
        var vip = getUserVip();
        switch (vip) {
            case 1:
                discount = 0;
                break;
            case 2:
                discount = CURRENT_SPEC_DATA.gp_vip_discount;
                break;
            case 3:
                discount = CURRENT_SPEC_DATA.gp_op_discount;
                break;
            case 4:
                discount = CURRENT_SPEC_DATA.gp_sup_discount;
                break;

            default:
                break;
        }

        //拼接 加入购物车的 对象
        var goods_count = $$('#buyNum').text();

        cartItem.goods_count = parseInt(goods_count);
        cartItem.discount = discount/100;
        //cartItem.goods_pay_price = cartItem.discount * cartItem.goods_unit_price;

        var isHave = false;
        for(var i=0;i<_CART_DATA_U_.length;i++){
            if( _CART_DATA_U_[i].price_id == cartItem.price_id ){
                isHave = true;
                _CART_DATA_U_[i].goods_count = parseInt(_CART_DATA_U_[i].goods_count) + parseInt(cartItem.goods_count);
            }
        }
        if(!isHave){
            _CART_DATA_U_.push(cartItem);
        }
        setPrefs('_CART_DATA_U_',_CART_DATA_U_);
        api.sendEvent({
            name: 'cartUpdateEvent'
        });
        toast('成功加入购物车');
        setTimeout(function(){
           api.closeFrame();
        },50);

    }
</script>

</html>
